<template>
  <div class="activity-admin">
    <ul class="menu">
      <li :class="['content', menuActive == index ? 'active-content' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenu(index)">
        {{ item }}
      </li>
    </ul>
    <div class="activity-admin" v-show="menuActive === 0">
      <MyHeader>
        <div slot="title">专题活动管理</div>
      </MyHeader>
      <div class="activity-list">
        <div class="upload-icon">
          <div class="box" @click="goUpload">
            <img src="@/static/img/editPersonalHome/upload_icon.png" alt="" />
          </div>
          <!-- <div class="btn">
            <div class="share">上传</div>
          </div> -->
        </div>
        <div class="activity-info" v-for="(item, index) in activityList" @mouseleave="handleMouseLeave" @mouseenter="handleMouseEnter(item.data_id)">
          <div v-show="enterActivity === item.data_id" class="mark all-center">
            <i class="el-icon-edit" @click.stop="goEdit(item.data_id)" style="font-size: 32px;margin-right: 15px;"></i>
            <i class="el-icon-delete" @click.stop="deleteActivity(item.data_id)" style="font-size: 32px;margin-right: 15px;"></i>
          </div>
          <div class="box">
            <el-image
              fit="cover"
              :src="item.title_page"
              alt=""
            />
          </div>
          <div class="info">
            <div class="activity-title">
              {{ item.name }}
            </div>
            <div class="time">
              {{ item.start_time.split(" ")[0] + '-' + item.end_time.split(" ")[0] }}
            </div>
            <div class="collect">
              <p>
                <img src="@/static/img/editPersonalHome/zhenyan.png" alt="" />
                {{ item.read_count }}
              </p>
              <!-- <p>
                <img src="@/static/img/editPersonalHome/share.png" alt="" />

              </p>
              <p>
                <img src="@/static/img/editPersonalHome/favorite.png" alt="" />
                {{ item.collect_times }}
              </p> -->
            </div>
          </div>
        </div>
      </div>
      <Pagin
        ref="page"
        v-show="activityList.length !== 0"
        :func="getDataList"
        :pagesSizes="[10, 20, 30, 50]"
        :sizeNum="10"
        :layout="'prev, pager, next'"
        :background="true"
        :position="'center'"
        class="pagin"
      ></Pagin>
    </div>
    <div class="new-activity-upload" v-show="menuActive == 1">
      <UploadActivity ref="uploadActivity" :data_id="data_id" />
    </div>
  </div>
</template>

<script>
import Pagin from "@/components/pagin.vue";
import MyHeader from "./common/myHeader.vue";
import { getImgUrl } from "@/utils/downloadFile";
import UploadActivity from "../uoloadActivity"

export default {
  name: "",
  middleware: 'identityInfo',
  components: {
    Pagin,
    MyHeader,
    UploadActivity
  },
  props: {},
  data() {
    return {
      activityList: [],
      menuList: [
        '专题活动管理',
        '专题活动上传',
      ],
      menuActive: 0,
      data_id: '',
      enterActivity: ''
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$refs.page.refresh();
  },
  methods: {
    getImgUrl,
    goUpload() {
      this.menuActive = 1
      this.data_id = ''
    },
    goEdit(data_id) {
      this.menuActive = 1
      this.data_id = data_id
      console.log(this.data_id)
    },
    handleMouseEnter(id) {
      this.enterActivity = id
    },
    handleMouseLeave() {
      this.enterActivity = ''
    },
    deleteActivity(data_id) {
      this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteActivity({ data_id }, {}).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$refs.page.refresh()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    handleMenu(index) {
      this.menuActive = index
      if (index == 0) {
        this.$refs.page.refresh();
      } else {
        this.data_id = ''
      }
    },
    getDataList(page, page_size, callback) {
      console.log('this.$store.state.user.info', this.$store.state.user.info.userInfo)
      const params = {
        page_num: page,
        page_count: page_size,
        recycle: 1,
        userid: this.$store.state.user.info?.user_info?.data_id
      }
      this.$api.getActivity(params).then((res) => {
        this.activityList = Array.isArray(res.result.item_list) ? res.result.item_list : [];
        callback(this.activityList, res.result.total_count);
      });
    },
  },
};
</script>

<style scoped lang="less">
.activity-admin {
  .menu {
    height: 100%;
    margin-right: 90px;
    margin-bottom: 50px;
    margin: 0 90px 50px 100px;

    .content {
      // width: 150px;
      line-height: 24px;
      margin-right: 80px;
      display: inline-block;
      font-size: 24px;
      color: #999;
      cursor: pointer;
      list-style-type: none;

      &.active-content {
        color: #000;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .pagin {
    background: #fff;
    padding-bottom: 40px;
  }

  .activity-list {
    background: #fff;
    padding: 40px 47px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .upload-icon {
      height: 344px;
      margin-bottom: 41px;
      display: inline-block;

      .box {
        width: 490px;
        height: 290px;
        background: #f3f4f4;
        border: 0;
        box-sizing: border-box;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        img {
          width: 56px;
          height: 56px;
        }
      }

      .btn {
        margin-top: 87px;
      }
    }

    .activity-info {
      margin-bottom: 41px;
      display: inline-block;
      position: relative;

      .mark {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 290px;
        background-color: #000;
        opacity: 0.6;
        z-index: 999;

        .el-icon-edit,
        .el-icon-delete {
          cursor: pointer;
        }
      }

      .box {
        width: 490px;
        height: 290px;
        background: #f3f4f4;
        cursor: pointer;

        ::v-deep(.el-image) {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        color: #999;
        font-size: 16px;
        margin-top: 13px;

        .activity-title {
          width: 490px;
          font-weight: 600;
          color: #000;
          margin-bottom: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .time {
          display: inline-block;
        }

        .collect {
          float: right;
          p {
            display: inline-block;
            margin-right: 20px;
            img {
              vertical-align: top;
            }
          }
        }
      }
    }

    .upload-icon {
      .box {
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
